@charset "utf-8";
/**
 * Created by kroyo on 2017/12/14.
 * linkman
 */


@import 'common/reset';
@import 'common/mixincommon';


html,body{
    width: 100%;
    height: 100%;
}




.main{
    min-width: 100%;
    min-height: 100%;
    padding-top: r(30px);
    padding-bottom: r(100px);
    background-color: $f2;
    .linkman-addbtn{
        display: block;
        font-size: r(32px);
        color: $acolor;
        text-align:center; 
        margin-top: r(30px);
        margin-bottom: r(30px);
        &:before{
            display: inline-block;
            content: '';
            width: r(24px);
            height: r(24px);
            background: url(../img/login/icon-linkadd.png) no-repeat center;
            background-size: 100%;
            margin-right: r(10px);
            vertical-align: -1px;
        }
    }
    //联系人列表
    .linkman-item{
        display: table;
        width: 100%;
        height: r(200px);
        background-color: #ffffff;
        margin-bottom: r(40px);
    }
    .item-left{
        display: table-cell;
        width: r(130px);
        height: 100%;
        line-height: r(200px);
        text-align: center;
        vertical-align: middle;
        input{
            display: none;
        }
        .check{
            position: relative;
            display: inline-block;
            width: r(50px);
            height: r(50px);
            border:r(1px) solid $borcolor;
            @include borradius(50%);
            @include transitions(.4s);
            overflow: hidden;
            &:after{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: '';
                width: 100%;
                height: 100%;
                border: r(12.5px) solid transparent;
                z-index: 1;
                @include borradius(50%);
                @include transitions(.4s);
                box-sizing: border-box;
            }
        }
        input:checked~.check{
            border-color: $acolor;
            &:after{
                border-color: $acolor;
            }
        }
    }
    .item-right{
        display: table-cell;
        width: r(140px);
        height: 100%;
        line-height: r(200px);
        text-align: center;
        font-size: r(32px);
        vertical-align: middle;
        a{
            color: $acolor;
        }
    }
    .item-center{
        display: table-cell;
        vertical-align: middle;
        .title{
            font-size: r(32px);
            color: $s3;
            span{
                display: inline-block;
                height: r(36px);
                line-height: r(34px);
                font-size: r(24px);
                color: #bbbbbb;
                border: 1px solid #bbbbbb;
                @include borradius(r(18px));
                padding: 0 r(15px);
                margin-left: r(20px);
            }
        }
        .text{
            font-size: r(28px);
            color: $s6;
            margin-top: r(20px);
        }
    }
}




.footer-btn{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: r(100px);
    line-height: r(100px);
    color: #ffffff;
    font-size: r(32px);
    text-align: center;
    background-color: $acolor;
}






//没有联系人时显示视图
.nolinkman-view{
    margin-bottom: r(50px);
    .icon{
        width: r(200px);
        height: r(200px);
        background: url(../img/icon-linkman.png) no-repeat center;
        background-size: 100%;
        margin:r(240px) auto r(30px);
    }
    .text{
        font-size: r(28px);
        color: $s9;
        text-align: center;
    }
}







.addlink-main{
    width: 100%;
    height: 100%;
    background-color: $f2;
    padding: r(40px);
    font-size: r(32px);
    input{
        width: 100%;
        height: r(90px);
        padding: 0 r(20px);
        color: $s3;
        @include inputplace(#bbbbbb);
        margin-top: r(40px);
        background-color: #ffffff;
        @include borradius(r(10px));
    }
    .btn{
        display: block;
        width: 100%;
        height: r(90px);
        line-height: r(90px);
        margin-top: r(40px);
        text-align: center;
        @include borradius(r(10px));
    }
    .updata-btn{
        background-color: $acolor;
        color: #ffffff;
    }
    .back-btn{
        color: $acolor;
        border: 1px solid $acolor;
        background-color: transparent;
    }
}






